{% extends 'base.html' %}
{% load static %}

{% block title %}积分记录 - 本地有约{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1><i class="fas fa-coins"></i> 积分记录</h1>
                <p>查看您的积分明细</p>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="card d-inline-block p-3" style="background: var(--gradient-primary); color: white;">
                    <h3 class="mb-0">{{ user.points }}</h3>
                    <small>当前积分</small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mb-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <!-- 筛选器 -->
            <div class="card card-custom mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <select class="form-select" id="typeFilter" onchange="filterRecords()">
                                <option value="">全部类型</option>
                                <option value="earn">收入</option>
                                <option value="spend">支出</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <select class="form-select" id="sortFilter" onchange="filterRecords()">
                                <option value="-created_at">最新记录</option>
                                <option value="created_at">最早记录</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 记录列表 -->
            <div id="recordsContainer">
                <div class="text-center py-5">
                    <div class="loader"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let currentPage = 1;
    
    function loadRecords() {
        const typeFilter = document.getElementById('typeFilter').value;
        
        API.points.getRecords({ page: currentPage, type: typeFilter })
            .then(response => {
                const records = response.data.results || response.data;
                const container = document.getElementById('recordsContainer');
                
                if (records.length === 0) {
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fas fa-receipt"></i>
                            <h3>暂无积分记录</h3>
                            <p>参与活动、评论互动可以获得积分哦</p>
                        </div>
                    `;
                    return;
                }
                
                container.innerHTML = records.map(record => `
                    <div class="card card-custom mb-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="mb-1">${record.type_display}</h6>
                                    <p class="text-muted mb-0">${record.description}</p>
                                    <small class="text-muted">${formatDate(record.created_at)}</small>
                                </div>
                                <div class="text-end">
                                    <h4 class="mb-0 ${record.points > 0 ? 'text-success' : 'text-danger'}">
                                        ${record.points > 0 ? '+' : ''}${record.points}
                                    </h4>
                                    <small class="text-muted">余额: ${record.balance_after}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('');
            })
            .catch(error => {
                console.error('加载失败:', error);
            });
    }
    
    function filterRecords() {
        currentPage = 1;
        loadRecords();
    }
    
    document.addEventListener('DOMContentLoaded', loadRecords);
</script>
{% endblock %}
